<template>
  <div class="daraBoardMainItem_content flex flex-c">
    <div class="header_box flex flex-c flex-jsb mb-10 p-12">
      <div class="content_title">用户数量</div>
      <div class="content_valueBox flex flex-ac flex-jsb">
        <div class="zhi_box flex flex-ac">
          <div class="val">{{ numberStatistics.numberUsers }}</div>
          <div class="unit ml-10">个</div>
        </div>
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
      </div>
    </div>
    <div class="main_box flex flex-c flex-jsb p-12">
      <div class="content_title">职务类别</div>
      <div class="content_valueBox flex flex-ac flex-jsb">
        <div class="zhi_box flex flex-ac">
          <div class="val">{{ numberStatistics.numberPositions }}</div>
          <div class="unit ml-10">个</div>
        </div>
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
const iconPng = new URL("@/assets/img/png/user.png", import.meta.url).href;
const props = defineProps({
  assetStatisticsObj: {
    type: Object,
    required: false,
    default: {},
  },
});
let numberStatistics = ref({
  numberPositions: 0, //职务
  numberUsers: 0, //用户
});
onMounted(() => {});

onBeforeUnmount(() => {});
watch(
  () => props.assetStatisticsObj,
  () => {
    
    if (props?.assetStatisticsObj) {
      if (props.assetStatisticsObj?.numberPositions) {
        numberStatistics.value.numberPositions =
          props.assetStatisticsObj?.numberPositions;
      }
      if (props.assetStatisticsObj?.numberUsers) {
        numberStatistics.value.numberUsers =
          props.assetStatisticsObj?.numberUsers;
      }
    }
  }
);
</script>
<style lang="scss" scoped>
.daraBoardMainItem_content {
  width: 100%;
  height: 100%;

  .header_box,
  .main_box {
    width: 100%;
    height: 50%;
    background: #fff;
    border-radius: 6px;

    .content_title {
      font-weight: 600;
      font-size: 14px;
      color: #666666;
    }

    .content_valueBox {
      .val {
        font-size: 24px;
        color: #333333;
      }

      .unit {
        font-size: 15px;
        color: #333333d0;
      }
    }

    .content_valueBox {
      .icon {
        width: 35px;
        height: 35px;
        background: linear-gradient(to bottom, #fbdf93, #f09360);
        padding: 6px;
        border-radius: 50%;
        .img {
          width: 90%;
          height: 90%;
          margin: auto;
        }
      }
    }
  }
}
</style>